<template>
	<view class="container">
		<!-- 头部标题 -->
		<view class="bottom">
			<text class="small">快来看看</text>
			<text class="big">最近发生了啥~</text>
		</view>

		<!-- 功能分页导航 -->
		<van-tabs @click="toggleCates" :data-currentTitle="currentTitle" class="van-tabs" animated sticky>
			<van-tab v-for="(item, index) in title" class="van-tab" :title="item" :key="index">
				<tab-bottom :currentTitle="currentTitle" :currentIndex="currentIndex" :list="list" ref="tabBottom"></tab-bottom>
			</van-tab>
		</van-tabs>
	</view>
</template>

<script>
	import tabBottom from '@/components/tabBottom/tabBottom.vue'

	export default {
		name: 'home',
		components: {
			tabBottom
		},
		data() {
			return {
				title: ['话题', '闲置', '跑腿', '租赁'],
				currentTitle: '话题',
				currentIndex: 0,
				// 当前页面
				page: 1,
				// 每次获取10条数据，页面长度
				pageSize: 6,
				// 当前的主题数据（请求过来的数据）
				list: [],
				// 当前应该请求的云函数名字
				funcName: '',
				// 判断是否触底
				isReachBottom: false,
				// 当前分栏的总数
				total: 0
			}
		},
		// 当点击tabbar时触发
		onTabItemTap() {
			// 短震动效果
			uni.vibrateShort()
			console.log('震动');
		},
		methods: {
			// 动态获取分栏数据
			get_home_info(index = 0, page = 1, pageSize = 6) {
				// 通过index的值判断调用哪个函数
				switch (index) {
					case 0:
						this.funcName = 'topics'
						break
					case 1:
						this.funcName = 'idles'
						break
					case 2:
						this.funcName = 'runErrands'
						break
					case 3:
						this.funcName = 'leases'
				}
				// console.log(index, this.funcName);

				// uni.showLoading({
				// 	title: '加载中...',
				// 	mask: true
				// });
				wx.cloud.callFunction({
					name: `get_${this.funcName}_info`,
					data: {
						page,
						pageSize
					}
				}).then(res => {
					if (this.isReachBottom) {
						this.list = [...this.list, ...res.result.data]
						uni.hideLoading()
						this.isReachBottom = false
					} else {
						console.log(res);
						this.list = res.result.data
						setTimeout(() => {
							uni.hideLoading()
						}, 1000)
					}

				})
			},

			// 获取当前数据库的数据数量
			get_currentInfo_total(index = 0) {
				// 通过index的值判断调用哪个函数
				switch (index) {
					case 0:
						this.funcName = 'topics'
						break
					case 1:
						this.funcName = 'idles'
						break
					case 2:
						this.funcName = 'runErrands'
						break
					case 3:
						this.funcName = 'leases'
				}
				wx.cloud.callFunction({
					name: 'get_currentInfo_total',
					data: {
						funcName: this.funcName
					}
				}).then(res => {
					// console.log(res);
					this.total = res.result.total.total
				})
			},

			// 点击切换分类
			async toggleCates(e) {
				// 获取数据前清空之前的数据
				this.list = []
				this.page = 1
				const {
					page,
					pageSize
				} = this
				// index是标题的索引，title是标题名字
				const {
					index,
					title
				} = e.target
				console.log('-------'+index);
				this.currentTitle = title
				this.currentIndex = index
				// 调用子组件的reset方法
				this.$refs.tabBottom[index].reset()
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				await this.get_currentInfo_total(index)
				this.get_home_info(index, page, pageSize)
			}
		},

		onLoad(options) {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			this.get_currentInfo_total()
			this.get_home_info()
		},

		// 下拉刷新
		onPullDownRefresh() {
			this.list = []
			this.page = 1
			this.total = 0
			const result = new Promise((resolve, reject)=>{
				this.get_currentInfo_total(this.currentIndex)
				this.get_home_info(this.currentIndex, this.page, this.pageSize)
				resolve('成功了')
			})
			
			result.then(res=>{
				uni.stopPullDownRefresh()
			})
		},

		// 触底的时候
		onReachBottom() {
			this.page++
			const {
				currentIndex,
				page,
				pageSize
			} = this
			// 判断是否继续获取数据
			if (this.list.length >= this.total) {
				return uni.showToast({
					title: '到底啦',
					icon: 'none'
				})
			}
			this.isReachBottom = true
			// console.log(`当前的分栏：${this.currentIndex},当前分栏的页数：${this.page}`);
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			this.get_home_info(currentIndex, page, pageSize)
		}
	}
</script>

<style scoped lang="scss">
	.container {
		font-size: 14px;
		line-height: 24px;
		// background-color: #5a53c8;

		// 头部标题
		.bottom {
			width: 100%;
			height: 160rpx;
			padding: 20rpx;
			padding-left: 50rpx;
			box-sizing: border-box;
			justify-content: space-between;
			background-color: #5a53c8;
			// background-color: #9f9f9f;
			display: flex;
			flex-direction: column;
			color: white;

			// 小文字
			.small {
				font-size: 36rpx;
			}

			// 大文字
			.big {
				font-size: 50rpx;
			}
		}

		.van-tab {
			background-color: #5a53c8;
		}

	}
</style>
